<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>p46_自定义指令_对象式</title>
		<!--
			需求2:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
		 -->

		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>{{name}}</h1>
			<h1>当前的n值：<span v-text="n"></span></h1>
			<h1>扩大10倍：<span v-big="n"></span></h1>
			<!-- 如果有多个单词，使用中划线，不要使用驼峰命名-->
			<h1>扩大10倍：<span v-big-number="n"></span></h1>
			<button @click="n++">点我++</button>
			<hr />

			<input type="text" v-fbind:value="n" autofocus /><!-- 直接使用autofocus可以自动获取焦点，但不是在每个浏览器上都好用 -->
		</div>
	</body>
	<script type="text/javascript">
		//全局的指令，跟过滤一样；
		Vue.directive('fbind', {
			bind(element, binding) {
				element.value = binding.value
				/*
				   注意directives配置项里面的this是window;为什么是window？
				   因为所以指令回调里面的this肯定是window，不会是vm；
				   指令是操作元素的，指令里面元素和绑定相关信息都已经传给你了，就不需要vm了。
				 */
			},
			//指令所在元素被插入页面时
			inserted(element, binding) {
				element.focus();
			},
			//指令所在的模板被重新解析时
			update(element, binding) {
				element.value = binding.value
			}
		})
		//函数全局
		Vue.directive("big", function(element, binding) {
			element.innerText = binding.value * 10
		})

		const vm = new Vue({
			el: '#root',
			data: {
				n: 1,
				name: "尚硅谷"
			},
			/* 跟计算属性、监视属性、过滤一样都是通过配置项定义的 */
			directives: {
				big2(element, binding) { //这个elemnt是span
					element.innerText = binding.value * 10
				},
				/* 这是完整的函数写法，函数本身就是个对象，函数名就是key，如果key时特殊字符，就使用引号。
				简写为：'big-number'(){}
				 */
				'big-number': function(element, binding) {
					element.innerText = binding.value * 2
				},
				fbind_(element, binding) { //element 是input标签
					element.value = binding.value
					element.focus() //这一句不起作用，因为input只是绑定上了，input元素并没有经过vue解析后显示在页面。
				},
				fbind2: {
					//指令与元素成功绑定时(一上来)
					bind(element, binding) {
						element.value = binding.value
						/*
						   注意directives配置项里面的this是window;为什么是window？
						   因为所以指令回调里面的this肯定是window，不会是vm；
						   指令是操作元素的，指令里面元素和绑定相关信息都已经传给你了，就不需要vm了。
						 */
						console.log(this);
					},
					//指令所在元素被插入页面时
					inserted(element, binding) {
						element.focus();
					},
					//指令所在的模板被重新解析时
					update(element, binding) {
						element.value = binding.value
					}
				}
			}
		})
	</script>
</html>